<script lang="ts" setup>
import { ref } from 'vue';
import { usePopupStore } from '@/store/popup';
import { storeToRefs } from 'pinia';
import { getAddressList } from '@/api/car';
import { useLocale } from '@/locale/locale';

const { t } = useLocale();
const popupStore = usePopupStore();
const { carAirportPickerRef } = storeToRefs(popupStore);

const props = withDefaults(
  defineProps<{
    id: number;
  }>(),
  {
    id: 0
  }
);

const chooseId = ref(0);
const list = ref([]);

popupStore.onOpened('CAR_AIRPORT', async () => {
  chooseId.value = props.id;
  await getAirportList();
});

async function getAirportList() {
  const payload: any = {
    pagination: false,
    typeId: 1
  };
  const res = await getAddressList(payload);
  if (res.code == 0) {
    list.value = res.data.list;
  }
}

const emit = defineEmits<{
  update: [id: number, showname: string, address: string];
}>();

function chooseAddress(item: any) {
  popupStore.closeCarAirportPicker();
  emit('update', item.id, item.name, item.address);
}
</script>

<template>
  <apt-popup-car
    ref="carAirportPickerRef"
    :showConfirmBtn="false"
    :title="t('TransferAirportSelection')"
    background="#f8f8f8"
    height="80vh"
    title-position="left"
    @close="popupStore.closeCarAirportPicker()"
  >
    <view class="apt-car-airport-picker-contain">
      <view class="apt-car-airport-picker-contain-title">{{ t('TransferAirportOpened') }}</view>
      <view
        v-for="(item, index) in list"
        :key="index"
        class="apt-car-airport-picker-contain-list"
        @click="chooseAddress(item)"
      >
        <view class="apt-car-airport-picker-contain-list-t">
          <image
            src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_airport_list.png"
          />
          {{ item.name }}
        </view>
        <view class="apt-car-airport-picker-contain-list-b">{{ item.address }}</view>
      </view>
    </view>
    <view class="apt-car-airport-picker-bottom">{{ t('TransferMoreAirport') }}</view>
  </apt-popup-car>
</template>

<style lang="scss">
.apt-car-airport-picker-contain {
  background: #ffffff;
  border-radius: 12rpx;
  padding: 32rpx;

  &-title {
    font-weight: 500;
    font-size: 28rpx;
    color: #3d3d3d;
    line-height: 40rpx;
  }

  &-list {
    border-bottom: 1px solid #f4f4f4;

    &:last-child {
      border-bottom: none;
    }

    padding: 24rpx 0;

    &-t {
      display: flex;
      align-items: center;

      image {
        display: block;
        width: 28rpx;
        height: 28rpx;
        margin-right: 8rpx;
      }

      font-weight: 500;
      font-size: 28rpx;
      color: #3d3d3d;
      line-height: 40rpx;
    }

    &-b {
      padding-left: 36rpx;
      margin-top: 8rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #b0adad;
      line-height: 34rpx;
      white-space: nowrap; /* 保持文本在一行内 */
      overflow: hidden; /* 隐藏溢出的内容 */
      text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
    }
  }
}

.apt-car-airport-picker-bottom {
  margin-top: 32rpx;
  font-weight: 400;
  font-size: 28rpx;
  color: #afafaf;
  line-height: 44rpx;
  text-align: center;
}
</style>
